
<%@include file="/WEB-INF/common/taglibs.jsp"%>
<script type="text/javascript" src="${supr}/plugins/forms/validate/jquery.validate.min.js"></script>
<script type="text/javascript"
	src="${ctx}/resources/js/datatable-query.js"></script>
<input type="hidden" class="filterdata" field="parameterGroup.id"
	op="eq" value="${parameterGroup.id}" />
<div class="row-fluid">
<div class="span12">
<div class="box gradient">
<div class="title">
<h4><span>Parameter</span></h4>
<a href="#" class="minimize">Minimize</a></div>
<div class="content scrollable clearfix">
<table class="ajaxTable display table table-bordered">
	<thead>
		<tr>
			<th>Name</th>
			<th>Value</th>
			<th>Type</th>
			<th>Action</th>
		</tr>
	</thead>
</table>
</div>
</div>

</div>

<a href="#newParameter" data-toggle="modal" class="btn btn-info"> <span
	class="icon12 icomoon-icon-plus white"></span> New</a> <a href="#" class="btn btn-info" id="update"> <span
	class="icon12 icomoon-icon-plus white"></span> Update</a></div>

 
<script type="text/javascript">

var render = false;
var oTime = "";
var oTable;
$(document).ready(function () {
	oTable = $('.ajaxTable').dataTable({
		"bLengthChange": true,
		"aoColumns": [
		              { "sWidth": "25%" },
		              { "sWidth": "65%" },
		              { "sWidth": "5%" },
		              { "sWidth": "5%", "sClass": "center", "bSortable": false },
		          ],
//		"aoColumnDefs": [
//		  { 'bSortable': false, 'aTargets': [0,6] }
//		],
		"sAjaxSource": '${ctx}/parameter/',
		"fnInitComplete": function (oSettings, json) { }
	});
	
	johnny.resetFilter($('.reset'));

	$(".datepickerlazy").datepicker({
		dateFormat: 'yy-mm-dd',
		onSelect: function () {
			updateGrid();
		}
	}).keydown(function (event) {
		if (event.keyCode == 8) { $(".datepickerlazy").val(""); }
		else { event.preventDefault(); }
	});

	$(".filterdata").keyup(function () {
		updateGrid();
	});
	$('#confirmParameter').click(function(){
		$.ajax({
			url : "${ctx}/parameter/create/",
			type : "POST",
			data : $('#parameterForm').serialize(),
			dataType : "json",
			success : function(data){		
				if(data && data.state && (data.state.indexOf("ERROR") != -1)){
					johnny.error(data.message);
					return;
				}else{
					$('#newParameter').modal('hide');
					updateGrid();
					johnny.info("create new Parameter successfully");
				}
			}
		});


	});
	function getFormInput( name, value, form) {
        return $("<input hidden=true name='"+ name + "' value='" + value + "'>").appendTo(form);
    }
	  $("#update").click(function () {
	        var actions = $("input[name=action]");
	        var i = 0;
	        var form = $("<form></form>");
	        $('body').append(form);
	        
	        $.each(actions, function (index, value) {
	            var checker = $(value)
	            if (checker.attr("checked")) {
	                var id = checker.attr("value");
	                getFormInput("id",id,form);
	                getFormInput("key",$("#key" + id).attr("value"),form);
	                getFormInput("value",$("#value" + id).attr("value"),form);
//	                getFormInput("type",$("#type" + id).attr("value"),form);
	                
		            i++;
	            }
	        });

		if (i>0){
//			  getFormInput("parameterGroupLd",,form);
			$.ajax({
				url : "${ctx}/parameter/${parameterGroup.id}/edit/",
				type : "POST",
				data : form.serialize(),
				dataType : "json",
				success : function(data){		
					if(data && data.state && (data.state.indexOf("ERROR") != -1)){
						johnny.error(data.message);
						return;
					}else{
						$('#newParameter').modal('hide');
						updateGrid();
						johnny.info("create new Parameter successfully");
					}
				}
			});
 		}else{

 			johnny.warning("please select at least on record ");
 	 		}
	    });

	    

	
});


function dataValidate() {

    var status = $("#parameterForm").validate({
        rules: {
            key: {
	    		lettersonly: true
            }
        }
    });
//    console.dir(status);
    return (status.errorList.length == 0);
}
function updateGrid() {
	 
oTable.fnDraw();
}

var columnHeader = ['key', 'value',"type"];
var QueryData = function (aoData) {
	return johnny.initQueryData(aoData, columnHeader);
}

var DataTableForm = function (json, echo) {
	var dataArray = new Array();
	for (var i = 0; i < json.result.length; i++) {
		var subArray = new Array();
		 var id = json.result[i].id;
        subArray.push(inputHtml(id, "key", json.result[i].key));
        if ("text" === json.result[i].type){
    	    subArray.push(textHtml(id, "value", json.result[i].value));
         }else{
     	    subArray.push(inputHtml(id, "value", json.result[i].value));
            }
	    subArray.push(json.result[i].type);
		subArray.push(actionHtml(json.result[i].id));
		dataArray.push(subArray);
	}
	return {
		sEcho: echo,
		iTotalRecords: json.totalCount,
		iTotalDisplayRecords: json.totalCount,
		aaData: dataArray
	};
}
function inputHtml(id, name, value) {
    var mainSpan = $("<span>");
    $("<input>").addClass("span6 styled").attr({
        id: name + id,
        type: "text",
        name: name,
        value: value
    }).appendTo(mainSpan);
    return mainSpan.html();
}
function textHtml(id, name, value) {
    var mainSpan = $("<span>");
    $("<textarea>").addClass("span6 styled").attr({
        id: name + id,
        type: "text",
        name: name
    }).text(value).appendTo(mainSpan);
    return mainSpan.html();
}



function actionHtml(id) {
	   var mainSpan = $("<span>");
       var checker = $("<input>").addClass("styled").attr({
           type: "checkbox",
           name: "action",
           value: id
       }).appendTo(mainSpan);
       return mainSpan.html();
}
</script>

<div id="newParameter" class="modal hide fade" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span
	class="icon12 minia-icon-close"></span></button>
<h3>New Parameter in ${parameterGroup.name}</h3>
</div>
<div class="modal-body">
<form method="post" id="parameterForm"><input type="hidden"
	name="parameterGroupLd" value="${parameterGroup.id}" />
<div class="form-row row-fluid"><label class="form-label span4">Key</label>
<input class="span8 validate" name="key" /></div>
<div class="form-row row-fluid"><label class="form-label span4">Value</label>
<textarea class="span8 uniform" id="textarea" rows="3" name="value"></textarea>

</div>
<div class="form-row row-fluid"><label class="form-label span4">Key</label>
        <div class="span8 controls">   
	                <select name="type">
							<option  selected="selected"  value="input">Input</option>
							<option  value="text">Text</option>
							<option  value="image">Image</option>
	          	     </select>
</div>
</div>


</form>
</div>
<div class="modal-footer"><a href="#" class="btn"
	data-dismiss="modal">Close</a> <a href="#" id="confirmParameter"
	class="btn btn-primary">Save changes</a></div>
</div>

<body>